<script lang="ts" setup name="goodsGroupDialog">
import { ref, watch } from "vue";
import { Goods } from "@/api/interface/index";
import { addGoodsGroupAPI, getGoodsList, getFoodCategoryList, editGoodsGroupAPI } from "@/api/modules/goods";
import SelectTreeData from "@/components/SelectTreeData/index.vue";
import { ElForm, ElMessage } from "element-plus";
const groupForm = ref<InstanceType<typeof ElForm>>();
export interface DialogProps {
  title: string;
  row: {
    id?: number;
    name: string;
    desc: string;
    foodspecIds: number[];
    detailList?: any[];
  };
  isView: boolean;
  dialogVisible?: boolean;
  api?: (params: { id: string }) => Promise<any> | undefined;
  getTableList?: () => void;
}
const dialogProps = ref<DialogProps>({
  title: "",
  row: { name: "", desc: "", foodspecIds: [] },
  isView: false,
  dialogVisible: false
});

const rules = {
  name: [{ required: true, message: "请输入分组名称" }],
  desc: [{ required: true, message: "请输入分组描述" }],
  foodspecIds: [{ required: true, message: "请选择菜品分组" }]
};

const acceptParams = (params: DialogProps) => {
  dialogProps.value.dialogVisible = true;
  dialogProps.value.row = params.row;
  foodList.value = params.row.detailList as Goods.ResGoodsCategoryList[];
  dialogProps.value.title = params.title;
  dialogProps.value.isView = params.isView;
  dialogProps.value.getTableList = params.getTableList;
};

const foodList = ref<Goods.ResGoodsCategoryList[]>([]);
const SelectTreeRef = ref<InstanceType<typeof SelectTreeData> | null>(null);
// 选择菜品
const openDialog = () => {
  SelectTreeRef.value?.acceptParams({
    title: "选择菜品",
    columns: [
      { type: "selection", label: "#", width: 60 },
      { prop: "name", label: "菜品名称", align: "left" },
      { prop: "foodSpecName", label: "规格", align: "left" },
      { prop: "foodTypeName", label: "分类", align: "left" }
    ],
    idName: "foodCategoryId",
    isView: false,
    apiParams: { type: 1 },
    mate: "foodSpecId",
    selTags: foodList.value.map(v => {
      v.id = v.foodSpecId as number | string;
      v.name = v.name;
      return v;
    }),
    api: getGoodsList,
    treeApi: getFoodCategoryList
  });
};

interface SelectList {
  list: Goods.ResGoodsCategoryList[];
  title: string;
  index: number;
  type: string;
}

const onselectList = (e: SelectList) => {
  foodList.value = JSON.parse(JSON.stringify(e.list));
  dialogProps.value.row.foodspecIds = e.list.map(v => v.foodSpecId as number);
};

const onSubmit = async () => {
  await groupForm.value!.validate();
  if (dialogProps.value.row.id) {
    // 编辑
    await editGoodsGroupAPI(dialogProps.value.row);
    openMessage("success", "编辑成功");
    dialogProps.value.dialogVisible = false;
    dialogProps.value.getTableList!();
  } else {
    // 新增
    await addGoodsGroupAPI(dialogProps.value.row);
    openMessage("success", "新增成功");
    dialogProps.value.dialogVisible = false;
    dialogProps.value.getTableList!();
  }
};

const openMessage = (type: string = "success", message: string = "") => {
  ElMessage({
    message,
    type
  });
};

watch(
  () => dialogProps.value.dialogVisible,
  newV => {
    if (!newV) {
      groupForm.value!.resetFields();
    }
  }
);

const onCloseTag = (index: number) => {
  dialogProps.value.row!.foodspecIds.splice(index, 1);
  foodList.value.splice(index, 1);
};

defineExpose({ acceptParams });
</script>

<template>
  <div class="group-dialog">
    <el-dialog v-model="dialogProps.dialogVisible" :title="dialogProps?.title + '分组'" width="500">
      <el-form
        ref="groupForm"
        :model="dialogProps.row"
        label-width="100"
        label-position="left"
        label-suffix="："
        style="padding: 20px"
        :rules="rules"
      >
        <el-form-item label="分组名称" prop="name">
          <el-input :disabled="dialogProps.isView" v-model="dialogProps.row!.name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="分组描述" prop="desc">
          <el-input :disabled="dialogProps.isView" v-model="dialogProps.row!.desc" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="分组菜品" prop="foodspecIds">
          <!-- -->
          <el-button v-if="foodList.length < 1 && !dialogProps.isView" type="primary" size="small" @click="openDialog">
            添加菜品
          </el-button>
          <div v-else class="tag-list">
            <div class="tag">
              <el-tag
                style="margin-right: 5px"
                v-for="(item, index) in foodList"
                :key="item.id"
                :closable="!dialogProps.isView"
                type="warning"
                @close="onCloseTag(index)"
              >
                {{ item.name }}
              </el-tag>
            </div>
            <div class="add-btn" v-if="!dialogProps.isView" @click="openDialog">
              <img src="@/assets/icons/add.svg" alt="" />
            </div>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogProps.dialogVisible = false">取消</el-button>
          <el-button type="primary" v-show="!dialogProps.isView" @click="onSubmit"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <SelectTreeData ref="SelectTreeRef" @selected-list="onselectList"></SelectTreeData>
  </div>
</template>

<style lang="scss" scoped>
.group-dialog {
  .tag-list {
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    .tag {
      display: flex;
      flex: 1;
      align-items: center;
      height: 30px;
      overflow-x: auto;
      border: 1px solid #dcdfe6;
    }
    .add-btn {
      width: 25px;
      height: 25px;
      & > img {
        width: 100%;
        height: 100%;
        margin-left: 5px;
      }
    }
  }
}
</style>
